<template>
  <div class="myTodoComp mb16">
    <h3 class="withLine title14">
      {{ $t('myTodoTask') }}
      <span class="title3Icon" v-show="false">
        <a-icon type="plus" />
      </span>
    </h3>
    <div class="rightCompMainContBox bdt">
      <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
      <ul>
        <li class="todo-item" v-for="item in lists" :key="item.id">
          <a @click="goto(item)">
            <span>[{{ $t('reviewed') }}]</span>
            <span class="relName">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.instanceName"></table-ellipsis>
            </span>
            <!-- eslint-disable-next-line vue/no-v-html -->
            <span class="date" v-html="$commonFun.getDateTextMinuteStr(item.createTime)"></span>
          </a>
        </li>
        <li class="todo-item" v-if="loading === false && lists.length === 0">{{ $t('noData') }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { todoPerms } from '@/config/permission/index'
export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  computed: {

  },
  data () {
    return {
      todoPerms,
      loading: false,
      lists: []
    }
  },
  created () {
    this.$hasPermission([todoPerms.review.view]) && this.getData()
  },
  methods: {
    getData () {
      this.lists = []
      this.loading = true
      // verifyApi.getVerifyPageData({ actionStatus: 1, actionItemStatus: 1, pageSize: 8 }).then(res => {
      //   this.lists = res.data
      // }).finally(() => {
      //   this.loading = false
      // })
      this.$api.getMyPendingAudit({ pageSize: 8, pageNo: 1 }).then(res => {
        this.lists = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    goto (auditItem) {
      this.$router.push({
        path: '/todo/applicationContent',
        query: {
          id: auditItem.instanceId,
          code: auditItem.businessCode,
          key: auditItem.businessKey,
          p: auditItem.taskId,
          aorr: 'r',
          status: 10
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.myTodoComp {
  flex:none;
  .rightCompMainContBox {
    max-height: 280px;
    min-height: 100px;
    position: relative;
  }
  .todo-item {
    height: 32px;
    line-height: 32px;
    > a {
      display: block;
      display: flex;
    }
    .relName {
      flex:1 0 0;
      margin-left: 8px;
      margin-right: 40px;
    }
    .date {
      font-size: 12px;
      color: #cdcdcd;
      flex: none;
    }
  }
}
</style>
